<template>
  <div id="dialogDicData">
    <el-dialog
      :title="showTitle"
      :visible.sync="dialogData.isShow"
      :before-close="labelHandleClose"
      width="550px"
    >
      <div class="form-box">
        <el-form
          ref="ruleForm"
          :model="form"
          :rules="formRules"
          label-width="90px"
        >
          <el-form-item label="字典标签" prop="dictLabel">
            <el-input v-model.trim="form.dictLabel"></el-input>
          </el-form-item>
          <el-form-item label="字典键值" prop="dictValue">
            <el-input v-model.trim="form.dictValue"></el-input>
          </el-form-item>
          <el-form-item label="字典类型" prop="dictType">
            <el-input v-model.trim="form.dictType" :disabled="true"></el-input>
          </el-form-item>
          <el-form-item label="样式属性" prop="cssClass">
            <el-input v-model.trim="form.cssClass"></el-input>
          </el-form-item>
          <el-form-item label="字典排序" prop="dictSort">
            <el-input v-model.trim="form.dictSort"></el-input>
          </el-form-item>
          <el-form-item label="回显样式" prop="listClass">
            <el-select
              v-model="form.listClass"
              placeholder="请选择回显样式"
              class="long"
            >
              <el-option
                v-for="item in styleList"
                :key="item.key"
                :label="item.value"
                :value="item.key"
              ></el-option>
            </el-select>
            <div><i class="el-icon-info"></i>table表格字典列显示样式属性</div>
          </el-form-item>
          <el-form-item label="系统默认" prop="isDefault">
            <el-radio
              v-for="item in sysList"
              :key="item.isDefault"
              v-model="form.isDefault"
              :label="item.isDefault"
            >
              {{ item.dictLabel }}
            </el-radio>
          </el-form-item>
          <el-form-item label="状态" prop="status">
            <el-radio
              v-for="item in statusList"
              :key="item.dictValue"
              v-model="form.status"
              :label="item.dictValue"
            >
              {{ item.dictLabel }}
            </el-radio>
          </el-form-item>
          <el-form-item label="备注" prop="remark">
            <el-input v-model.trim="form.remark" type="textarea"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="success" plain @click="cancelLabel">
          取 消
        </el-button>
        <el-button
          type="success"
          :loading="loading"
          @click="confirmLabel('ruleForm')"
        >
          确 定
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {
  getDSecondDetail,
  editDSecond,
  addDSecond
} from '@/api/system/dictionaries' // 接口
import { sysNormalDisable } from '@utils/dictionariesFunc'
export default {
  name: 'DialogDicData',
  msg: '字典管理-二级列表-新增/编辑弹窗',
  props: ['dialogData'],
  data() {
    var valiSort = (rule, value, callback) => {
      if (!value) {
        callback(new Error('字典排序不能为空'))
      } else {
        if (isNaN(value)) {
          callback(new Error('字典排序必须为数字值'))
        } else {
          callback()
        }
      }
    }
    return {
      isAdd: true, // 新增-true,编辑-false
      showTitle: '',
      loading: false,
      statusList: [], // 数据状态
      styleList: [
        { value: '默认', key: 'default' },
        { value: '主要', key: 'primary' },
        { value: '成功', key: 'success' },
        { value: '信息', key: 'info' },
        { value: '警告', key: 'warning' },
        { value: '危险', key: 'danger' }
      ], // 回显样式
      sysList: [
        { dictLabel: '正常', isDefault: 'Y' },
        { dictLabel: '停用', isDefault: 'N' }
      ], // 系统默认
      dictCode: null, // 字典编码
      // 表单数据
      form: {
        dictCode: null, // 字典编码
        dictLabel: '', // 字典标签
        dictValue: '', // 字典键值
        dictType: '', // 字典类型
        cssClass: '', // 字典样式
        dictSort: '', // 字典排序
        listClass: '', // 表格字典样式
        isDefault: 'Y', // 是否默认（Y是 N否）
        status: '0', // 状态0正常,1停用
        remark: '' // 备注
      },
      formRules: {
        dictLabel: {
          required: true,
          message: '请输入字典标签',
          trigger: 'blur'
        },
        dictValue: {
          required: true,
          message: '请输入字典键值',
          trigger: 'blur'
        },
        dictSort: [{ required: true, validator: valiSort, trigger: 'blur' }]
      }
    }
  },
  mounted() {
    this.getStatusList()
    this.isAdd = this.dialogData.type === 'add'
    this.showTitle = this.isAdd ? '新增数据' : '编辑数据'
    this.form.dictType = this.dialogData.dictType
    if (!this.isAdd) {
      // 编辑
      this.dictCode = this.dialogData.dictCode
      this.getFormData()
    }
  },
  methods: {
    /* 获取字典状态 */
    async getStatusList() {
      let data = await sysNormalDisable('sys_normal_disable')
      this.statusList = [...data]
    },
    /* 编辑时获取表单详情 */
    getFormData() {
      getDSecondDetail(this.form.dictType, this.dictCode, (response) => {
        let obj = response
        for (let key in this.form) {
          this.form[key] = obj[key]
        }
      })
    },
    labelHandleClose(done) {
      this.cancelLabel()
      done()
    },
    cancelLabel() {
      // 关闭前清空
      this.loading = false
      this.dialogData.isShow = false
    },
    /* 确定 */
    confirmLabel(formName) {
      let _this = this
      this.$refs[formName].validate((valid) => {
        if (valid) {
          _this.subForm()
        } else {
          return false
        }
      })
    },
    /* 提交表单 */
    subForm() {
      this.loading = true
      let obj = { ...this.form }
      delete obj.parentName
      if (this.isAdd) {
        // 新增
        addDSecond(
          this.form.dictType,
          obj,
          (response) => {
            this.loading = false
            this.$emit('refresh')
            this.cancelLabel()
          },
          (response) => {
            this.loading = false
            this.$message.warning(this.showTitle + '失败，' + response.message)
          }
        )
      } else {
        // 编辑
        editDSecond(
          this.form.dictType,
          this.dictCode,
          obj,
          (response) => {
            this.loading = false
            this.$emit('refresh')
            this.cancelLabel()
          },
          (response) => {
            this.loading = false
            this.$message.warning(this.showTitle + '失败，' + response.message)
          }
        )
      }
    }
  }
}
</script>
<style lang="less"></style>
